import Styles from '@/pages/Monitor/BatteryMonitor/components/RealtimeMonitor.less';
import { Space } from 'antd';
import React from 'react';

const ColorMap: React.FC = () => {
  const stackTempMap: Map<string, string> = new Map([
    ['高', '#FF5353'],
    ['较高', '#FF8726'],
    ['中', '#FFD60C'],
    ['正常', '#D7DFF4'],
  ]);
  const stackTempColorArray: string[] = ['高', '较高', '中', '正常'];
  return (
    <>
      <Space>
        {stackTempColorArray.map((item: string) => {
          return (
            <Space key={item} className={Styles.ColorMapBox}>
              <div
                className={Styles.ColorMapBoxCard}
                style={{ backgroundColor: stackTempMap.get(item) }}
              ></div>
              <div>{item}</div>
            </Space>
          );
        })}
      </Space>
    </>
  );
};

export default ColorMap;
